<template>
    <Row :gutter="30">

        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :rules="rules" :model="filters" :label-width="90" inline>
                    <!--<FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option placeholder="请选择小区"
                                       @change="housingchange" style="width:100%" no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="部门">
                        <div class="filters-input">
                            <treeselect :options="optionsCompany" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                        noResultsText="没有发现结果" :default-expand-level="100" placeholder="选择部门"
                                        style="width: 100%" :show-count="true" v-model="filters.job"/>
                        </div>
                    </FormItem>-->
                    <FormItem label="姓名">
                        <div class="filters-input">
                            <Input placeholder="姓名" v-model="filters.name" size="large"/>
                        </div>
                    </FormItem>
                    <FormItem label="手机号">
                        <div class="filters-input">
                            <Input placeholder="手机号" v-model="filters.phone" size="large"/>
                        </div>
                    </FormItem>
                    <Button type="primary" icon="ios-search" size="large" @click="loadData()">
                        搜索
                    </Button>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" size="large"
                        @click="handleUpdate('新增')">
                    新增
                </Button>
            </Row>

            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="登录账号/电话"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>
                <el-table-column prop="propertyName" label="物业"></el-table-column>
                <el-table-column prop="jobName" label="部门"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleUpdate('修改',scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="modalTitle"
               width="900">
            <Form :model="modal" :rules="rules" ref="form2" label-position="right" :label-width="110"
                  class="myOpenFrom">

                <FormItem label="物业" prop="propertyId">
                    <treeselect :options="optionsParent" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                noResultsText="没有发现结果" :default-expand-level="1" :value="value" placeholder="选择物业"
                                style="width: 100%" :show-count="true" v-model="modal.propertyId"
                                @input="propertychange" :disabled="modalTitle=='修改'?true:false"/>
                </FormItem>
                <FormItem label="部门" prop="companyId">
                    <treeselect :options="optionsCompany" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                noResultsText="没有发现结果" :default-expand-level="100" placeholder="选择部门"
                                style="width: 100%" :show-count="true" v-model="modal.companyId"/>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="modal.name" placeholder="姓名" size="large" required="true"/>
                </FormItem>
                <FormItem label="登录账号/电话" prop="phone">
                    <Input v-model="modal.phone" placeholder="登录账号/电话"/>
                </FormItem>
                <FormItem label="登录密码" prop="password">
                    <Input v-model="modal.password" placeholder="登录密码" size="large" required="true"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </Row>
</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";

    export default {
        components: {
            Treeselect
        },
        data() {
            return {
                //校验规则
                rules: {
                    propertyId:[
                        {
                            required: true,
                            message: "物业不能为空",
                        }
                    ],
                    housingId: [
                        {
                            required: true,
                            message: "小区不能为空",
                        }
                    ],
                    companyId: [
                        {
                            required: true,
                            message: "部门不能为空",
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: "姓名不能为空",
                        }
                    ],
                    password: [
                        {required: true, message: "密码不能为空",},
                        {min: 6, message: "最少6位密码"}
                    ],
                    phone: [
                        {
                            required: true,
                            message: "登录账号或电话不能为空",
                        }
                    ],
                },
                optionsParent: [],
                optionsCompany: [],
                modalTitle: "",
                value: null,
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                formVisible: false,
                modal: {},
                filters: {},
                //表单提交状态
                formLoading: false,
                tableData: [],
            };
        },

        created: function () {
            this.loadData();
            this.getproperty();
        },
        methods: {
            //加载物业
            getproperty() {
                let url = "/api/user/treeList";
                this.postRequest(url).then(res => {
                    if (res.code == 20000) {
                        this.optionsParent = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //选择物业加载部门
            propertychange(val) {
                let params = {};
                params.id = val;
                this.postRequest("/api/manageHR/getCompanyByPropertyId", params).then(res => {
                    if (res.code == 20000) {
                        this.optionsCompany = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载数据
            loadData() {
                console.log(this.filters.phone);
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开页面
            handleUpdate(str, row) {
                this.modalTitle = str;
                this.optionsCompany = [];
                this.formVisible = true;
                if (str == '修改') {
                    this.modal = row;
                }
            },
            //保存
            handleSubmit() {
                this.$refs["form2"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.postRequest("/api/manageHR/saveOrUpdateUser", this.modal).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.$refs["form2"].resetFields();
                                this.loadData();
                                this.$Message.success("保存成功！");
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //取消
            onCancel() {
                this.modal = {};
                this.formLoading = false;
                this.formVisible = false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //删除
            handleDelete: function (id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/manageHR/deleteUser?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                });
            },
        }
    };
</script>
